<template>
	<view class="uni-list list-pd">
		<view class="uni-list-cell cell-pd">
			<view class="uni-uploader">
				<view class="uni-uploader-head">
					<view class="uni-uploader-title">点击可预览选好的图片</view>
					<view class="uni-uploader-info">{{imageList.length}}/9</view>
				</view>
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image,index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
								<view class="delete icon iconfont icon-shanchu" @tap='handleDeleteImageClick(index)'></view>
							</view>
						</block>
						<view class="uni-uploader__input-box">
							<view class="uni-uploader__input" @tap="chooseImage"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"upload-image",
		data() {
			return {
				imageList: [],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			};
		},
		methods:{
			chooseImage: async function() {
			
					
				if (this.imageList.length === 9) return
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: ['compressed', 'original'],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						this.$emit('upload', this.imageList)
					},
					fail: (err) => {
						
					}
				})
			},
			
			// 点击预览图片
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			// 点击删除图片
			handleDeleteImageClick(index) {
				uni.showModal({
				  title: '删除提示',
				  content: '您是否要删除该张图片?',
				  cancelText:'不删除',
				  confirmText:'删除',
				  success: (res) => {
				    if (res.confirm) {
				     this.imageList.splice(index, 1)
					 this.$emit('upload', this.imageList)
				    }
				  }
				})
			}
		}
	}
</script>

<style scoped>

.cell-pd {
		padding: 22rpx 30rpx;
	}

	.list-pd {
		margin-top: 50rpx;
	}
	
	.uni-uploader__file {
		position: relative;
	}
	.delete {
		position: absolute;
		right: 20upx;
		padding: 0 10upx;
		top: 10upx;
		font-size: 36upx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #FFFFFF;
		border-radius: 10upx;
	}
</style>
